<template>
  <div>
    <el-card>
      <Se :controlDiable="showBox" @sendId="accpet"></Se>
    </el-card>

    <el-card style="margin-top: 10px">
      <div v-show="!addSpuShow && !controlSku">
        <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 10px" @click="creatSpu">添加SPU</el-button>
          <el-table :data="spuList" border style="width: 100%">
            <el-table-column type="index" label="序号" width="80" align="center">
            </el-table-column>
            <el-table-column prop="name" label="SPU名称">
            </el-table-column>
            <el-table-column prop="goods_brief" label="SPU描述"> </el-table-column>
            <el-table-column prop="address" label="操作"> 
              <template slot-scope="{row,$index}">
                <Lzbutton title="添加sku" type="primary" icon="el-icon-plus" size="small" @click="addSku(row)"></Lzbutton>
                <Lzbutton title="修改sku" type="warning" icon="el-icon-edit" size="small" @click="editSpu(row)"></Lzbutton>
                <Lzbutton title="SKU列表" type="info" icon="el-icon-time" size="small" @click="showSkuList"></Lzbutton>
                
                <el-popconfirm 
                  confirm-button-text='确定'
                  cancel-button-text='不用了'
                  icon="el-icon-info"
                  icon-color="red"
                  :title="`你确定要删除 ${row.name}吗？`"
                  @onConfirm="rmColumn(row)"
                  >
                  <Lzbutton title="删除" slot="reference" type="danger" icon="el-icon-delete" size="small" ></Lzbutton> 
                  <!-- @click ="rmColumn(row,$index)" -->
                </el-popconfirm>
              </template>
          </el-table-column>
          
        </el-table>   
        <el-pagination 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :pager-count="5"
          style="margin:10px 0"
          :current-page="page"
          :page-sizes="pageSet"
          :page-size="limit"
          layout=" prev, pager, next, jumper, ->, sizes , total"
          :total="total">
      </el-pagination>          
      </div>

      <!-- 添加SPU模块 -->
      <!-- <addSpu v-show="addSpuShow" :controlShow.sync="addSpuShow" @updata:controlShow = "addSpuShow = $event"></addSpu> -->
      <addSpu v-show="addSpuShow"  :controlShow.sync="addSpuShow" ref="spuDialog" @judgeSuccess="Success"></addSpu>

      <Addsku v-show="controlSku" ref="sku" :skuShow.sync="controlSku"></Addsku>

    </el-card>

    <!--        dialog显示框      -->
      <el-dialog title="spu列表" :visible.sync="dialogFormVisible" width="80%" :before-close="DialogClose">
        <el-table :data="skuList" ref="skulist" v-loading="loading">

          <el-table-column  label="名称" prop="spu_name">

          </el-table-column>

          <el-table-column label="价格(元)" prop="price">

          </el-table-column>

          <el-table-column label="重量" prop="weight">

          </el-table-column>
          
          <el-table-column label="默认图片" prop="pic">
            <template slot-scope="{row,$index}">
              <img :src="`http://192.168.1.11:5000${row.pic}`" style="width:150px">
            </template>

          </el-table-column>
        </el-table>
      </el-dialog>

  </div>
</template>

<script>
import Addsku from '@/views/spu/addSku'
import addSpu from './addSpu/index'
export default {
  name:'spu',
  data() {
    return {
      // 控制disble点击
      showBox: true,
      // pagination
      pageSet: [3,10,50],
      page:1,
      limit:3,
      // 接收到的数据
      category:'',
      // 数据列表
      spuList:[],
      total:0,
      // 控制其它模块显示
      addSpuShow:false,
      // sku显示
      controlSku:false,
      // Dialog显示
      dialogFormVisible:false,
      // 获取来的Sku
      skuList: [],
      // 
      loading:true
      
    };
  },
  components:{
    addSpu,
    Addsku
  },
  methods: {
    // pagination
   async handleSizeChange(limit){
     this.limit = limit
      await this.getSpu(this.page,limit,this.category)

    },
   async handleCurrentChange(page){
      this.page = page
      await this.getSpu(page,this.limit,this.category)
    },

    accpet(id) {
      this.category = id.nd2
      this.getSpu()
      /*
      nd2: 1008002
      rd3: ""
      st1: "1005000"*/
    },
    // 从二级分类去获取数据
   async getSpu(page=this.page,limit=this.limit,category=this.category){
      
      let result = await this.$api.spu.reqSpu(page,limit,category)
      if(result.status != 200){
        return this.$message.error('获取数据失败')
      }
      let {data} = result
      this.spuList = data[1]
      this.total =  data[0]
    },

    // 创建Spu 显示AddDialog
    creatSpu(){
      this.$refs['spuDialog'].AddHandle(this.category)

    },
    // 删除行
   async rmColumn(row,index){
     try{
              // this.spuList.splice(index,1)
      let data = await this.$api.sku.reqDelGoods(row.id)
      if(data.status == 200){
        this.$message.success('删除成功')
        this.getSpu(this.spuList.length > 1?this.page:this.page-1)
      
         }
     }catch{
        this.$message.error('删除失败')

     }
    },
    
    // 修改Spu
    editSpu(row){
      // 下标是修改还是增加
      this.isCreate = true
      this.$refs['spuDialog'].editSpu(row)
      this.addSpuShow = true
    },
    // 通知父组件重新获取数据
    Success(){
      // 判断是修改还是增加的回调
      if(this.isCreate){
        this.getSpu(this.page,this.limit)
        // 清除下标
        this.isCreate = null
      }else{
        this.getSpu(1)
      }
    },

    // 控制SKU

    // sku请求
    addSku(row){
      this.controlSku = true
      this.$refs.sku.getCategory(row)
    },

    // dialog显示sku列表
    async showSkuList(){
      this.loading = true
      try{
        let result = await this.$api.sku.reqSku()
        if(result.status === 200){
          this.skuList = result.data
          this.loading = false
        }

      }catch{
        this.$message.error('请求失败')
      }

      this.dialogFormVisible = true
    },
    // 关闭Dialog之前
    DialogClose(){
      this.skuList = []
      this.loading = true
      this.dialogFormVisible = false
      
    }



  },
  watch:{
          // 控制其它模块显示
      addSpuShow:{
        handler(nValue,oValue){
          this.showBox = !this.showBox
        }
      },
      // sku显示
      controlSku(nValue,oValue){
          this.showBox = !this.showBox
      }
  }

};
</script>

<style>
</style>